<template>
    <div v-if="form.name !=undefined" class="rounded bg-[#f9f9f9] w-full h-full pb-10">
        <div class="p-4 flex justify-between items-center bg-white rounded">
            <div class="flex gap-5 items-center min-w-20">
                <el-button type="primary" @click="handleReturn">
                    <SvgIcon class="text-xl" :name="'icon-park-outline:back'" :iconify="true"/>
                </el-button>
                <div class="flex gap-2 items-center pr-4">
                    <div class="mr-3">
                        <div class="relative bg-orange-100 p-4 rounded-lg" style="background-color: rgb(255 237 213)">
                            <SvgIcon class="text-8xl" :name="'prime:microchip-ai'" :iconify="true"/>
                            <div class="absolute bottom-[-6px] right-[-5px] shadow bg-white mx-auto rounded-lg" style="background: white;">
                                <SvgIcon class="text-3xl text-orange-500" :name="'lucide:bot'" :iconify="true"  style="color: rgb(249 115 22)"/>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col justify-between gap-2">
                        <div class="font-bold text-lg">
                            {{ form.name }}
                        </div>
                        <div v-if="!loading" class="text-gray-400 text-xs">
                            {{t('aigcApp.autoSave')}} : {{form.saveTime  }}  
                        </div>
                        <div v-else class="flex items-center gap-1 text-gray-400 text-xs">
                            <SvgIcon :name="'eos-icons:bubble-loading'" :iconify="true"/>
                            {{ t('aigcApp.saving') }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <el-button v-for="item in activeMenus"
                    :key="item.key"
                    :type="appStore.activeMenu === item.key ?'primary':'default'"
                    class="!px-5 !rounded-2xl"
                    secondary
                    strong
                    @click="appStore.setActiveMenu(item.key)"
                >
                    <template #icon>
                        <SvgIcon :name="item.icon" :iconify="true"/>
                    </template>
                    {{ item.label }}
                </el-button>
            </div>
        </div>
        <!--设置-->
        <AppBase v-if="appStore.activeMenu==='setting'"></AppBase>
        <ChannelApi v-if="appStore.activeMenu==='api'"></ChannelApi>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { getObj } from '/@/api/aigc/app';
import { useAppStore } from '/@/stores/aigc/appStore';
const AppBase=defineAsyncComponent(()=>import('./base/index.vue'));
const ChannelApi=defineAsyncComponent(()=>import('./chanelApi/index.vue'));
    const {t}=useI18n();
    const router=useRouter();
    const appStore=useAppStore();
    const form=ref<any>({});
    const loading=ref(false);
    const activeMenus=[
        {key:'setting',icon:'uil:setting',label:t('aigcApp.setting')},
        {key:'api',icon:'hugeicons:api',label:t('aigcApp.api')},
    ];
    onMounted(async()=>{
        const id=router.currentRoute.value.query.id;
        await fetchData(id);
    });
 
    async function fetchData(id:String){
        loading.value=true;
        const data=await getObj(id);
        form.value=data.data;
        appStore.info=data.data;
        loading.value=false;
    }
    //返回
    function handleReturn(){
        router.push('/aigc/app/index');
    }
</script>
<style lang="css" scoped>
    
</style>